<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2022-04-14 14:26:46
 * @LastEditors: 小白
 * @LastEditTime: 2025-09-19 14:53:55
 * @FilePath: \tmsadmin\src\views\home\components\details.vue
-->

<template>
  <el-card class="page_card" shadow="never">
    <template #header>
      <div class="card-header">
        <div class="left">
         运单详情
        </div>
        <div class="right">
          <el-button style="margin-left: 20px" type="primary" @click="goBack()">
            返回上一页
          </el-button>
          <el-button circle @click="refreshFun">
            <i class="icon ion-refresh" :class="iconRefresh" />
          </el-button>
        </div>
      </div>
    </template>
     <el-collapse v-model="activeNames" accordion>
      <template v-for="(item,index) in tableData" :key="index">
        <el-collapse-item :title="item.consignee" :name="index">
        <Table :table-data="item.productList" :table-columns="columns" :page-size="pageSize" :page-num="pageNum" :loading="loading"
      :total="total" @edit="edit" @selectionChange="selectionChange" @change="changePage" @ok="getData()" />
      </el-collapse-item>
      </template>
      
      </el-collapse>
    <Modal @ok="getData" ref="editModalRef"></Modal>
    <ChaifenModal @ok="getData" ref="chaifenModalRef"></ChaifenModal>
  </el-card>
</template>
<script lang="ts" setup>
import { REQUEST } from '@/api/request'
import Table from './tablenopage.vue'
import Modal from './modalProduct.vue'
import ChaifenModal from './chaifenModal.vue'
import { onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
const props = defineProps({
  params: {
    type: Object,
    default: () => ({})
  }
})
const chaifenModalRef = ref()
const activeNames =ref([0])
const queryForm = ref({})
const iconRefresh = ref('')
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)
const tableData = ref([])
const columns = ref([
  {
    title: '订单类型',
    prop: 'orderType',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '150'
  },
  {
    title: '产品',
    prop: 'product',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
  {
    title: '发货数量',
    prop: 'shippingQuantity',
    align: 'center',
    modifiable: true,
    isShow: true,
    tooltip: false,
    minwidth: '100'
  },
  {
    title: '产品全称',
    prop: 'productName',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '500'
  },

  {
    title: '交货单',
    prop: 'deliveryNote',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },

  {
    title: '销售订单',
    prop: 'salesOrder',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
  {
    title: '批次',
    prop: 'batchNo',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
  {
    title: '开始时间',
    prop: 'startDate',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
  {
    title: '结束时间',
    prop: 'endDate',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
  {
    title: '录入人',
    prop: 'entryPerson',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
  {
    title: '录入时间',
    prop: 'createTime',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
  {
    title: '操作',
    prop: 'action',
    align: 'center',
    modifiable: true,
    fixed: 'right',
    isShow: true,
    minwidth: '180'
  },
])
watch(()=>props.params.id,(val:any)=>{
  if (val) {
    getData()
  }
})
onMounted(() => {
  getData()
})
const emits = defineEmits(['go'])
const goBack = () => {
  emits('go', { view: 'ActiveList',params: { row: {  } }  })
}
const getData = () => {
  loading.value = true
  REQUEST.POST('DETAILSORDERLIST', {
  ids: props.params.id,
  }).then((res: any) => {
   console.log(res.data,'res')
    tableData.value = res.data
    tableData.value.map(item=>{
       item.productList.map((item:any)=>{
        item.disabled = true
       })
      //  item.productList.sort((a,b)=> a.product.N - b.product)
    })
   loading.value = false
  })
 
}
const refreshFun = () => {
  iconRefresh.value = 'iconRefresh'
  getData()
  setTimeout(() => {
    iconRefresh.value = ''
  }, 1000)
}
const searchFun = (e: any) => {
  queryForm.value = e
  getData()
}
const selectList = ref([])
const selectionChange = (e: any) => {
  selectList.value = e
}
const editModalRef = ref()
const edit = (data: any) => {
  chaifenModalRef.value.openModal({
    title:data.title,
    row:data.row
  })
}
const changePage = (e: any) => {
  pageNum.value = e.pageNum
  pageSize.value = e.pageSize
  getData()
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style>
.el-collapse-item__header{
  background: #f5f5f5;
  padding-left: 10px;
  border-bottom:1px solid #cccccc!important;
}
</style>
